<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Marketing Sites Template</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <!-- 标题栏 -->
        <div class="title-bar" data-responsive-toggle="mainNavigation" data-hide-for="medium">
            <div class="title-bar-left">
                <button class="menu-icon" type="button" data-toggle="mainNavigation"></button>
                <div class="title-bar-title">Menu</div>
            </div>
            <div class="title-bar-right">Marketing Site</div>
        </div>
        <!-- ./标题栏 -->
        <!-- 顶部栏 -->
        <div class="top-bar" id="mainNavigation">
            <div class="top-bar-left">
                <ul class="menu vertical medium-horizontal">
                    <li class="menu-text hide-for-small-only">Marketing Site</li>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu vertical medium-horizontal">
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                    <li><a href="#">Five</a></li>
                    <li><a href="#">Six</a></li>
                </ul>
            </div>
        </div>
        <!-- ./顶部栏 -->
        <article class="grid-container">
            <div class="grid-x cell">
                <div
                        class="orbit"
                        role="region"
                        aria-label="Favorite Space Pictures"
                        data-orbit
                        data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft: fade-out; animOutToRight: fade-out">
                    <ul class="orbit-container">
                        <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
                        <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
                        <li class="orbit-slide is-active">
                            <img src="https://placehold.it/1200x450">
                        </li>
                        <li class="orbit-slide">
                            <img src="https://placehold.it/1200x450">
                        </li>
                        <li class="orbit-slide">
                            <img src="https://placehold.it/1200x450">
                        </li>
                        <li class="orbit-slide">
                            <img src="https://placehold.it/1200x450">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="text-center">
                <h1>Changing the World Through Design</h1>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
                <a href="#" class="button large">Learn More</a>
                <a href="#" class="button large hollow">Learn Less</a>
            </div>
            <hr>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-6 large-3">
                    <h3>Lorum</h3>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
                </div>
                <div class="cell medium-6 large-3">
                    <h3>Ipsum</h3>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
                </div>
                <div class="cell medium-6 large-3">
                    <h3>Dolor</h3>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
                </div>
                <div class="cell medium-6 large-3">
                    <h3>Sit Amet</h3>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
                </div>
            </div>
            <hr>
            <div class="grid-x cell">
                <div class="small-12 callout primary text-center">
                    <h3>Really Great Deals</h3>
                    <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor.</p>
                </div>
            </div>
            <hr>
            <div class="grid-x grid-margin-x">
                <div class="large-6 cell">
                    <h4>Nulla At Nulla Justo, Eget</h4>
                    <img class="thumbnail" src="https://placehold.it/700x250">
                    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in.</p>
                </div>
                <div class="large-6 cell">
                    <h4>Nulla At Nulla Justo, Eget</h4>
                    <img class="thumbnail" src="https://placehold.it/700x250">
                    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in.</p>
                </div>
            </div>
            <hr>
            <div class="grid-x cell">
                <ul class="menu">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>
            </div>
        </article>

        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/what-input/dist/what-input.js"></script>
        <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
